<template>
	<view class="login">

		<view class="logoBox">
			<image src="/static/logo.png" mode=""></image>
		</view>

		<view class="inputContent">
			<view class="inputBox">
				<input type="number" v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="inputBox">
				<input type="number" v-model="code" placeholder="请输入验证码" />
				<view class="sendCode" @click="handleSendcode" ref="sendCodeBtn">
					{{innerText}}
				</view>
			</view>
		</view>

		<view class="Agreement">
			<image v-if="check" src="https://mp.blrwworkshop.com/imgs/checked.png" mode="" @click="handleCheck"></image>
			<image v-else src="https://mp.blrwworkshop.com/imgs/check.png" mode="" @click="handleCheck"></image>
			<view class="">
				阅读并同意<text class="color_s" @click="handleAgreement(1)">《用户协议》</text>和<text class="color_s"
					@click="handleAgreement(2)">《隐私政策》</text>
			</view>
		</view>

		<view class="btns_student btns" @click="handleLogin">
			登录/注册
		</view>
		<view class="otherLogin" @click="handleBack">
			微信手机号登录
		</view>


		<view class="concat">
			注册登录相关问题，请<text class="color_s">点击此处</text>跳转微信客服
			<button open-type="contact" class="wxContent" type="default">
			</button>
		</view>

		<u-popup :show="show" bgColor="transparent" mode="center">
			<view class="HintContent">
				<view class="title">
					温馨提示
				</view>
				<view class="content">
					已阅读并同意<text class="color_s" @click="handleAgreement(1)">《用户协议》</text>和<text class="color_s"
						@click="handleAgreement(2)">《隐私政策》</text>
				</view>
				<view class="line"></view>

				<view class="bottomBox">
					<view class="item" @click="show = false">
						不同意
					</view>
					<view class="lineRow"></view>
					<view class="item agree" @click="handleagree">
						同意
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		sendMsg,
		login
	} from "@/api/api.js"
	export default {
		data() {
			return {
				check: false,
				show: false,
				deviceId: "", //设备id,
				deviceName: "", //设备名称
				phone: "",
				code: "",
				innerText: "获取验证码",
			}
		},
		onLoad() {
			// console.log("设备", uni.getDeviceInfo(), uni.getDeviceInfo().deviceBrand, uni.getDeviceInfo().deviceId)
			this.deviceId = uni.getDeviceInfo().deviceId
			this.deviceName = uni.getDeviceInfo().model


		},
		methods: {
			handleCheck() {
				this.check = !this.check
			},
			handleagree() {
				this.check = true
				this.show = false
			},
			async handleSendcode() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}

				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				try {
					const res = await sendMsg({
						phone: this.phone
					});
					if (res.code === 200) {
						let countdown = 60;
						this.timer = setInterval(() => {
							if (countdown <= 0) {
								clearInterval(this.timer);
								this.innerText = '获取验证码';
							} else {
								this.innerText = `${countdown}秒后重新获取`;
								countdown--;
							}
						}, 1000);
					}
				} catch (error) {
					uni.showToast({
						title: '验证码发送失败',
						icon: 'none'
					});
				}
			},
			async handleLogin() {
				if (!this.check) {
					this.show = true
					return
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}

				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				if (this.code == "") {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				let res = await login({
					phone: this.phone,
					code: this.code,
					deviceId: this.deviceId,
					deviceName: this.deviceName,
				})
				if (res.code == 200) {
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					uni.setStorageSync('token', res.token)
					setTimeout(() => {
						if (res.studentsCount == 0) {
							uni.redirectTo({
								url: "/pages/login/information"
							})
						}
						if (res.studentsCount == 1 || res.studentsCount == 2) {
							uni.redirectTo({
								url: "/pages/login/character"
							})
						}

					}, 1500)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			handleAgreement(type) {
				uni.navigateTo({
					url: `/pages/login/Agreement?type=${type}`
				})
			},
			handleBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.login {
		width: 100%;
		min-height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;


		.logoBox {
			margin-top: 288rpx;

			image {
				width: 110rpx;
				height: 286rpx;
			}
		}

		.inputContent {
			width: 636rpx;
			margin-top: 104rpx;

			.inputBox {
				width: 636rpx;
				height: 80rpx;
				background: #F6F6F6;
				border-radius: 41rpx;
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				padding: 40rpx;
				box-sizing: border-box;
				margin-bottom: 34rpx;
				justify-content: space-between;

				input {
					width: 65%;
				}

				.sendCode {
					font-weight: 400;
					font-size: 28rpx;
					color: #FFA515;
					line-height: 40rpx;
				}
			}
		}

		.Agreement {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #C9C9C9;
			line-height: 34rpx;
			margin-top: 90rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 12rpx;
			}
		}

		.btns {
			width: 636rpx;
			margin-top: 22rpx;
		}

		.otherLogin {
			margin-top: 50rpx;
			font-size: 25rpx;
		}

		.concat {
			font-weight: 400;
			font-size: 28rpx;
			color: #C9C9C9;
			line-height: 40rpx;
			position: fixed;
			bottom: 80rpx;

			.wxContent {
				width: 100rpx;
				height: 20rpx;
				position: absolute;
				right: 190rpx;
				top: 10rpx;
				background: transparent;
			}

			.wxContent::after {
				border: none;
			}
		}



		.HintContent {
			width: 640rpx;
			// height: 400rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.title {
				font-weight: 600;
				font-size: 36rpx;
				color: #000000;
				text-align: center;
				margin-top: 58rpx;
			}

			.content {
				width: 544rpx;
				font-weight: 400;
				font-size: 34rpx;
				color: #000000;
				line-height: 48rpx;
				margin: 38rpx auto 30rpx;
			}

			.line {
				width: 640rpx;
				height: 1rpx;
				background: #F6F6F6;
			}

			.bottomBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 110rpx;
				font-weight: 550;
				font-size: 34rpx;
				color: #000000;
				line-height: 48rpx;

				.lineRow {
					width: 1rpx;
					height: 100%;
					background: #F6F6F6;
				}

				.item {
					width: 48%;
					text-align: center;

				}

				.agree {
					color: #576B95;
				}
			}
		}
	}
</style>